import React, { Component } from 'react';
import './App.css';
import ThemeContext from './theme-context'
//ThemeContext里面经过创建会有两个变量，是两个reactComponent，一个是provider，只要把它放在使用context值的节点并使用provider组件进行包裹，就能把对应的数据传入。
import ThemeBar from './components/ThemeBar.js'
// import LikesButton from './components/LikesButton'
// import DigitalClock from './components/DigitalClock'
const themes = {
  light:{
    classnames:'btn btn-primary',
    bgColor: '#eee',
    color: '#000'
  },
  dark:{
    classnames:'btn btn-light',
    bgColor: '#222',
    color: '#fff'
  }
}

// const tags=['kong','帅哥','足球小子']
class App extends Component {
constructor(props){
  super(props)
  this.state = {
    comments:['this is my first reply'],
    themes:'light'
  }
}
  changeTheme(val){
    this.setState({themes:val})
  }
  render() {
    return (
    <ThemeContext.Provider value={themes[this.state.themes]}>
    {/* 并没有通过props的传递，themes.ligh被成功注入到ThemeBar里了 */}
      <div className="App">
        <a href="#theme-switcher"
          className="btn btn-light"
          onClick={()=>{this.changeTheme('light')}}
        >
          浅色主题
        </a>
        <a href="#theme-switcher"
          className="btn btn-secondary"        
          onClick={()=>{this.changeTheme('dark')}}
        >
          深色主题
        </a>
      </div>
      <hr/>
      <ThemeBar />
      </ThemeContext.Provider>
    );
  }
}

export default App;
